<!DOCTYPE html>
<html lang="en" style="overflow:auto;overflow-x: hidden">
<head>
    <meta charset="UTF-8">
    <title>cdr</title>
    <link rel="stylesheet" href="/static/css/cdr.css">
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/cdr.js"></script>
</head>
<body>
<div id="cdr-ctr">
    <div class="layui-layout layui-layout-admin" style="background: #f2f2f2;width: 100%;">
        <form class="layui-form">
            <div style="display: flex;">
                <div class="input-view" style="width: 280px">
                    <label>开始时间</label>
                    <div class="layui-col-sm7">
                        <input type="text" name="startDate" id="startDate" lay-verify="datetime"
                               placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="input-view" style="width: 280px">
                    <label>结束时间</label>
                    <div class="layui-col-sm7">
                        <input type="text" name="endDate" id="endDate" lay-verify="datetime"
                               placeholder="yyyy-MM-dd HH:mm:ss" value="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="input-view">
                    <label>呼叫标识</label>
                    <div class="layui-col-sm7">
                        <input type="text" name="call_id" class="layui-input">
                    </div>
                </div>
                <div class="input-view">
                    <label>主叫</label>
                    <div class="layui-col-sm7">
                        <input type="tel" name="caller" class="layui-input">
                    </div>
                </div>
                <div class="input-view">
                    <label>被叫</label>
                    <div class="layui-col-sm7">
                        <input type="tel" name="callee" class="layui-input">
                    </div>
                </div>
                <div class="input-view">
                    <label>a路时长大于</label>
                    <div class="layui-col-sm7">
                        <input type="tel" name="a_billsec" class="layui-input">
                    </div>
                </div>
                <div class="input-view">
                    <label>b路时长大于</label>
                    <div class="layui-col-sm7">
                        <input type="tel" name="b_billsec" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="display: flex">
                <button class="layui-btn" lay-submit="" lay-filter="sub" style="margin-left: 20px">搜索</button>
                <form class="layui-form" action="" style="margin-left: 20px;">
                    <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="语音|实时">
                </form>

            </div>
        </form>
        <table id="idTest" class="layui-table" lay-data="{id: 'idTest'}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:65, fixed: true,sort:true}">Id</th>
                <th lay-data="{field:'caller', width:150}">主叫</th>
                <th lay-data="{field:'callee', width:150}">被叫</th>
                <th lay-data="{field:'start_time', width:200}">开始时间</th>
                <th lay-data="{field:'end_time', width:200}">结束时间</th>
                <th lay-data="{field:'a_answer_time', width:150}">a路开始</th>
                <th lay-data="{field:'b_answer_time', width:150}">b路开始</th>
                <th lay-data="{field:'a_billsec', width:70}">a路时长</th>
                <th lay-data="{field:'b_billsec', width:70}">b路时长</th>
                <th lay-data="{field:'b_callee', width:150}">b路被叫</th>
                <th lay-data="{field:'b_caller', width:150}">b路主叫</th>
                <th lay-data="{field:'a_score', width:60}">a路评分</th>
                <th lay-data="{field:'b_score', width:60}">b路评分</th>
                <th lay-data="{field:'score', width:60}">总评分</th>
                <th lay-data="{fixed:'right', width:250, align:'center', toolbar: '#barTool'}"></th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/html" id="barTool">
    <a class="layui-btn layui-btn-mini" lay-event="liucheng">流程过程</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">流程列表</a>
    <a class="layui-btn layui-btn-mini" lay-event="download">下载</a>
</script>
<script>
    var $;
    layui.config({
        base: "js/"
    }).use(['table', 'element', 'layer', 'laydate', 'form', 'jquery'], function () {
        var table = layui.table;
        var element = layui.element;
        $ = layui.jquery
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        var off_line = "false";


        var laydate = layui.laydate;
        //开始时间
        laydate.render({
            elem: '#startDate'
            , type: 'datetime'
        });

        //结束时间
        laydate.render({
            elem: '#endDate'
            , type: 'datetime'
        });

        table.reload('idTest', {
            url: '/cdr/contenttable' + "?wordType={{.type}}"
            , height: 'full-105'
            , width: 'full-10',
            page: true
        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if (off_line == "true") {
                off_line = "false"
            } else {
                off_line = "true"
            }
        });
        form.on('submit(sub)', function (data) {
            var form_data = $("form").serialize();
            form_data += "&wordType=" + "{{.type}}"
            table.reload('idTest', {
                url: '/cdr/contenttable?' + form_data+"&off_line="+off_line
                , height: 'full-105'
                , width: 'full-10',
                page: true
            });
            return false;//在这里返回false

        });

        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                console.log(data.record_path)
                if (data.record_path == "") {
                    $.post('{{urlfor "CdrController.SelectCallPgCdrRecode"}}', {'uuid': data.other_uuid}, function (out) {
                        //多窗口模式，层叠置顶
                        layer.open({
                            type: 2 //此处以iframe举例
                            ,
                            title: '语音'
                            ,
                            shade: 0
                            ,
                            maxmin: true
                            ,
                            area: ['100%', '100%']
                            ,
                            content: "/cdr/flow_content?call_id=" + data.call_id + "&audio=" + out.message + "&other_uuid=" + data.other_uuid + "&off_line=" + off_line
                            ,
                            zIndex: layer.zIndex //重点1
                            ,
                            success: function (layero) {
                                layer.setTop(layero); //重点2
                            }
                        });
                    }, "json");
                } else {
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,
                        title: '语音'
                        ,
                        shade: 0
                        ,
                        maxmin: true
                        ,
                        area: ['100%', '100%']
                        ,
                        content: "/cdr/flow_content?call_id=" + data.call_id + "&audio=" + data.record_path + "&other_uuid=" + data.other_uuid + "&off_line=" + off_line
                        ,
                        zIndex: layer.zIndex //重点1
                        ,
                        success: function (layero) {
                            layer.setTop(layero); //重点2
                        }
                    });
                }
            } else if (obj.event === 'liucheng') {
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '流程'
                    , shade: 0
                    , maxmin: true
                    , area: ['100%', '100%']
                    , content: "/cdr/flowcdr?callid=" + data.other_uuid + "&off_line=" + off_line
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            } else if (obj.event === 'download') {
                $.post('{{urlfor "CdrController.GetExcel"}}', {'call_id': data.other_uuid}, function (out) {
                    window.open("/upload/file.xlsx");
                }, "json");
            }
        });
    });
    var vue = new Vue({
        el: "#cdr-ctr",
        data: {
            link: 0,
            phone: 0,
            user: 0

        }, methods: {
            move: function (item, flag) {
                console.log(item, flag);

                var from = flag ? this.tags : this.selected;
                var to = flag ? this.selected : this.tags;
                // if (!flag || to.length < this.max) {  //暂时不知道 干嘛的，  先保留了
                from.splice(from.indexOf(item), 1);
                to.push(item);
                // }
            },
        }, delimiters: ['[[', ']]']
    });
</script>
</body>
</html>

